<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-----------------弹出框----------------------------->
<div id="spu_dlg" class="easyui-dialog" title="编辑spu" style="width:700px;height:520px;"
     closed="true"  data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#spuBtns" >
    <form id="spuForm">
        <br/>
        <label>spu名称:</label>
        <input  id="spuName" name="spuName" class="easyui-textbox" data-options="" style="width:300px;"/>
        <br/><br/>
        <label>spu描述:</label>
        <input  id="description" name="description" class="easyui-textbox" data-options="multiline:true" style="width:500px;height:100px"/>

        <input id="spuId" name="spuId" type="hidden"/>
        <br/><br/>

        <!----------------商品图片列表 ----------------------->

        <table id="spuImgDg" class="easyui-datagrid" title="商品图片列表"
               data-options="singleSelect:true,method:'get',toolbar:'#spuImgTootbar'" ></table>

        <!----------------图片列表工具栏----------------------->
        <div id="spuImgTootbar" style="padding:5px;height:auto"  >
            <div style="margin-bottom:5px">
                <a href="#" id="spuImgAdd" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加图片</a>
                <a href="#" id="spuImgUploadBtn" class="easyui-linkbutton" iconCls="icon-save" plain="true" >图片上传</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
            </div>
        </div>

        <br/><br/>
        <!----------------销售属性列表---------------------------->
        <table id="spuSaleAttrDg" class="easyui-datagrid" title="销售属性列表"
               data-options="singleSelect:true,method:'get',toolbar:'#spuSaleAttrTootbar'" ></table>

        <!----------------销售属性列表工具栏----------------------->
        <div id="spuSaleAttrTootbar" style="padding:5px;height:auto"  >
            <div style="margin-bottom:5px">
                <a href="#" id="spuSaleAttrAddBtn" class="easyui-linkbutton" iconCls="icon-add" onclick="addSpuSaleAttr()" plain="true">添加销售属性</a>
                <a href="#" id="spuSaleAttrEditBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editSpuSaleAttr()">编辑销售属性</a>
                <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" >删除</a>
            </div>
        </div>



        <div th:include="spuSaleAttrPage"></div>
        <!-------------->



    </form>
</div>
<!----------------弹出框的按钮组----------------------->
<div id="spuBtns">
    <a href="#" class="easyui-linkbutton" onclick="saveSpu()">保 存</a>
    <a href="#" class="easyui-linkbutton" onclick="closeSpu()">关 闭</a>
</div>



<script th:inline="javascript">


    function initSpuInfoDlg(spuInfo){
        //打开对话框
        $('#spu_dlg').dialog("open");
        console.log("初始化文本"+spuInfo);

        //初始化表单
        initSpuForm(spuInfo);

        //初始化图片表格
        initSpuImgListDatagrid(spuInfo);

        //初始化上传控件
        initUploader();

        //初始化销售属性列表
        initSpuSaleAttrListDatagrid(spuInfo);
    }


    function addSpuSaleAttr(){

        initSpuSaleAttrDlg();
    }

    function editSpuSaleAttr(){
        var spuId= $("#spuId").val();
        var spuSaleAttr = $('#spuSaleAttrDg').datagrid('getSelected');
        initSpuSaleAttrDlg(spuId,spuSaleAttr);
    }

    function initSpuForm(spuInfo){
        //清空文本框
        $("#spuForm").form("clear");

        if(spuInfo==undefined) {
            return;
        }

            $("#spuName").textbox("setValue",spuInfo.spuName);
            $("#description").textbox("setValue",spuInfo.description);
            $("#spuId").val(spuInfo.id);

    }


    /*<![CDATA[*/
    function saveSpu() {
        var spuInfo = {};
        //保存单独的字段
        spuInfo["id"] = $("#spuId").val();
        spuInfo["spuName"] = $("#spuName").val();
        spuInfo["description"] = $("#description").val();
        spuInfo["catalog3Id"] = $("#ctg3ForSpuList").combobox('getValue');

        //保存图片表格字段
        var spuImgDgRows = $("#spuImgDg").datagrid('getRows');
        for (var i = 0; i < spuImgDgRows.length; i++) {
            spuInfo["spuImageList[" + i + "].imgName"] = spuImgDgRows[i].imgName;  //要跟bean中字段对齐
            spuInfo["spuImageList[" + i + "].imgUrl"] = spuImgDgRows[i].imgUrl;
        }

        //保存销售属性中的字段
        var spuSaleAttrDgRows = $("#spuSaleAttrDg").datagrid('getRows');
        for (var i = 0; i < spuSaleAttrDgRows.length; i++) {
            spuInfo["spuSaleAttrList[" + i + "].id"] = spuSaleAttrDgRows[i].id;  //要跟bean中字段对齐
            spuInfo["spuSaleAttrList[" + i + "].saleAttrId"] = spuSaleAttrDgRows[i].saleAttrId;  //要跟bean中字段对齐
            spuInfo["spuSaleAttrList[" + i + "].saleAttrName"] = spuSaleAttrDgRows[i].saleAttrName;
            //保存销售属性值的字段
            var saleAttrValueRows = spuSaleAttrDgRows[i].spuSaleAttrValueJson.rows;
            for (var j = 0; j < saleAttrValueRows.length; j++) {

                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].id"] = saleAttrValueRows[j].id;
                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].saleAttrValueName"] = saleAttrValueRows[j].saleAttrValueName;
                spuInfo["spuSaleAttrList[" + i + "].spuSaleAttrValueList[" + j + "].saleAttrId"] = spuSaleAttrDgRows[i].saleAttrId;
            }

        }

        console.log(JSON.stringify(spuInfo));

        //ajax 保存到后台
        $.post("saveSpuInfo", spuInfo, function (data) {
            $("#spu_dlg").dialog("close");
            $("#spulist_dg").datagrid("reload");
        });
    }

        function initSpuImgListDatagrid(spuInfo) {
            $('#spuImgDg').datagrid({url:""});
            $('#spuImgDg').datagrid('loadData', {total: 0, rows: []});
            console.log("初始化表格:"+spuInfo);
            spuImgDg = $("#spuImgDg").datagrid({
                idField: 'fileId',    //标识行的主键  可以利用getRowIndex进行查询
                columns: [[
                    {field: 'fileId', title: '文件编号', width: '15%'},//隐藏文件页面内部编号
                    {
                        field: 'imgName', title: '图片简称', width: '20%',
                        editor: {
                            type: 'validatebox', options: {required: true}  //必填项
                        }
                    },
                    {field: 'imgUrl', title: '图片路径', hidden: true},  //隐藏真实路径
                    {
                        field: 'progress', title: '上传进度', width: '20%',
                        formatter: function (value, row, index) {
                            console.log("更新进度条！！" + value);
                            if (!value) {
                                value = 0;
                            }
                            var htmlstr =
                                "<div class='easyui-progressbar progressbar' style='width:100px;height:20px;' value='" + value + "' text='" + value + "'%>" +
                                "<div class='progressbar-text'  style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                                "<div class='progressbar-value' style='width:" + value + "%; height: 20px; line-height: 20px;'>" +
                                "<div class='progressbar-text' style='width: 100px; height: 20px; line-height: 20px;'>" + value + "%</div>" +
                                "</div>" +
                                "</div>";
                            return htmlstr;
                        }
                    },
                    {
                        field: 'imgState', title: '上传状态', width: '20%',           //如果存在路径表示上传成功
                        formatter: function (value, row, index) {
                            console.log('row.imgUrl:' + row.imgUrl);
                            if (row.imgUrl != undefined && row.imgUrl != '') {
                                return '已上传';
                            } else {
                                return '等待上传';
                            }
                        }
                    }
                ]],
                onDblClickRow: function (rowIndex, rowData) {
                    //双击开启编辑行
                    spuImgDg.datagrid("beginEdit", rowIndex);
                    //设定当失去焦点时,退出编辑状态
                    var imgName = rowData.imgName;
                    $("input.datagrid-editable-input").val(imgName).bind("blur", function (evt) {
                        spuImgDg.datagrid('endEdit', rowIndex);
                    });
                },
                view: detailview,
                detailFormatter: function (rowIndex, rowData) {
                    return "<img src=" + rowData.imgUrl + " style='width:100px;height:100px;'>";
                }
            });

            if (spuInfo) {
                spuImgDg.datagrid({url: "spuImageList?spuId=" + spuInfo.id})
            }

        }


   function initUploader(){

            console.log("初始化上传控件");

            var spuImgDg=  $("#spuImgDg");
            //初始化上传控件
            var spuImgUploader = WebUploader.create({
                auto:false,
                // swf文件路径
                swf: '/webuploader/Uploader.swf',
                // 文件接收路径
                server: '/fileUpload',
                // 选择文件的按钮。
                pick: '#spuImgAdd',
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                //设定文件大小上限 2M
                fileSingleSizeLimit:2*1024*1024,
                //可接受的文件类型
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            console.log("初始化文件上传控件的响应--fileQueued");


            //当用户选择了文件以后，表格要进行增行
            spuImgUploader.on('fileQueued',function (file) {
                console.log("用户增加文件:"+file.id+'||'+file.name);
                var row={
                    fileId:file.id,
                    imgName:file.name
                }
                spuImgDg.datagrid('appendRow',row);
            });


            //上传过程中，该进度会反复触发
            spuImgUploader.on( 'uploadProgress', function( file, percentage ) {
                console.log("更新进度"+file.id);
                var rowIndex=spuImgDg.datagrid('getRowIndex',file.id);
                console.log("更新进度2:"+rowIndex);
                var progessRow={progress:(percentage*100).toFixed(2)};
                console.log("更新进度3:"+percentage);
                spuImgDg.datagrid('updateRow', {index:rowIndex,row:progessRow});
            });


            // 上传成功时，要把生成的图片路径返回给表格的行中的url
            console.log("初始化文件上传控件的响应--uploadSuccess");
            spuImgUploader.on( 'uploadSuccess', function( file ,response) {
                console.log("上传完成："+file.id+"||"+response._raw);
                var fileId=file.id;
                var rowIndex = spuImgDg.datagrid('getRowIndex',file.id);//通过file.id查询到行号
                spuImgDg.datagrid('updateRow',
                    {   index:rowIndex,
                        row:{imgUrl:response._raw}
                    });
            });


            $('#spuImgUploadBtn').click(function(){
                console.log("开始上传");
                if(spuImgUploader.getFiles().length<=0){
                    $.messager.alert('警告','没有需要上传的文件','warning');
                    return;
                }
                spuImgUploader.upload();
            });

    }

    function initSpuSaleAttrListDatagrid(spuInfo){
        console.log("初始化销售属性表格:"+spuInfo);
        var spuSaleAttrDg=$('#spuSaleAttrDg').datagrid({url:""});
         spuSaleAttrDg =$('#spuSaleAttrDg').datagrid('loadData', { total: 0, rows: [] });

        spuSaleAttrDg.datagrid({
            idField: 'saleAttrId',
            columns:[[
                { field:'id',title:'id',hidden:true },
                { field:'saleAttrId',title:'销售属性Id',width:'35%'},
                { field:'saleAttrName',title:'销售属性名称',width:'45%'},
                { field:'spuSaleAttrValueJson',title:'销售属性值暂存',hidden:true, width:'20%'}
            ]]
        });

        //有初始数据说明是编辑状态，要加载数据
        if(spuInfo){
            spuSaleAttrDg.datagrid({url:"spuSaleAttrList?spuId="+spuInfo.id});
        }
    }

</script>

</body>
</html>